<template>
  <div>
    <Layout>
      <div slot="main" class="main">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="系统名称" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
            <el-form-item label="系统logo" prop="logo">
                <uploadImg :img-url.sync="ruleForm.logo" :cut="false" />
            </el-form-item>

            <el-form-item label="公告" prop="noticeTitle">
                <el-input v-model="ruleForm.noticeTitle" />
            </el-form-item>

            <el-form-item label="有效天数" prop="dayLong">
                <el-input-number v-model="ruleForm.dayLong" :precision="2" :step="0.1" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item label="有效时间" prop="timeLong">
                <el-input v-model="ruleForm.timeLong" />
            </el-form-item>
            <el-form-item label="合作电话" prop="phone">
                <el-input v-model="ruleForm.phone" />
            </el-form-item>
             <!-- <el-form-item label="客服电话" prop="chatPhone">
                <el-input v-model="ruleForm.chatPhone" />
            </el-form-item> -->
            <el-form-item label="报名提示" prop="applyNotice">
                <el-input v-model="ruleForm.applyNotice" />
            </el-form-item>
            <el-form-item label="提现提示" prop="withdrawNotice">
                <el-input v-model="ruleForm.withdrawNotice" />
            </el-form-item>
            <el-form-item label="提现规则" prop="withdrawRule">
                <quill-editor v-model="ruleForm.withdrawRule" ref="withdrawRule"  class="editer"></quill-editor>
            </el-form-item>
            <el-form-item label="活动详情规则" prop="actRule">
                <quill-editor v-model="ruleForm.actRule" ref="actRule"  class="editer"></quill-editor>
            </el-form-item>
            <el-form-item label="申报要求" prop="couponRule">
                <quill-editor v-model="ruleForm.couponRule" ref="couponRule"  class="editer"></quill-editor>
            </el-form-item>




          <el-form-item>
            <el-button v-permisaction="['syssetting:syssetting:edit']" type="primary" @click="submitForm('ruleForm')">确定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </Layout>
  </div>
</template>

<script>
import Layout from '@/components/layout'
import { quillEditor } from "vue-quill-editor";
import comment from '@/components/MyComment'

export default {
  name: 'Setting',
  components: {
    Layout,
      quillEditor,
      comment
  },
  data() {

    return {
        // statusOptions:  [
        //     {
        //         "dictLabel":"开启",
        //         "dictType":"is",
        //         "dictValue":"T",
        //     },
        //     {
        //         "dictLabel":"关闭",
        //         "dictType":"is",
        //         "dictValue":"F",
        //     }
        // ],
      url: process.env.VUE_APP_BASE_API + '/api/v1/public/uploadFile',
      ruleForm: {
        name: this.$store.state.system.info.name,
        logo: this.$store.state.system.info.logo,
          dayLong: this.$store.state.system.info.dayLong,
          noticeTitle: this.$store.state.system.info.noticeTitle,
          timeLong: this.$store.state.system.info.timeLong,
          dayLong: this.$store.state.system.info.dayLong,
           phone: this.$store.state.system.info.phone,
          applyNotice: this.$store.state.system.info.applyNotice,
          actNotice: this.$store.state.system.info.actNotice,
          withdrawNotice: this.$store.state.system.info.withdrawNotice,
          withdrawRule: this.$store.state.system.info.withdrawRule,
          actRule: this.$store.state.system.info.actRule,
          couponRule: this.$store.state.system.info.couponRule,
          // chatPhone: this.$store.state.system.info.chatPhone,

          // shareImg: this.$store.state.system.info.shareImg,
          // shareCopy: this.$store.state.system.info.shareCopy,

          // isOpen: this.$store.state.system.info.isOpen,
          // birthdayMoney: this.$store.state.system.info.birthdayMoney,
      },


      rules: {
        name: [
          { required: true, message: '请输入系统名称', trigger: 'blur' },
          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
        ],
        logo: [
          { required: true, message: '请选择系统头像', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$store.dispatch('system/updateSetting', this.ruleForm).then(ret => {
            if (ret) {
              const str1 = document.title.split('-')[0]
              document.title = str1 + ' - ' + ret.name
                this.$message.success("修改成功")

            }
          })
        } else {
          return false
        }
      })
    },
    handleAvatarSuccess(e) {
      this.ruleForm.logo = e.data
    },
    beforeAvatarUpload(e) {

    }
  }
}
</script>

<style lang="scss" >
  .main{
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 0 4px 0 rgba(200, 200, 200, 0.5);
  }
  .avatar-uploader {
    .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      &:hover {
         border-color: #409EFF;
       }
    }
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
